<!-- 查询结果页面 -->
<template>
	<view class="bgAll">
		<view class="bg">
			<image src="../../static/image/bg2.jpg" mode="aspectFill"></image>
		</view>
		<view class="welcome"><image src="../../static/image/logo.png" mode="heightFix"></image>防伪查询</view>
		<view class="wrap">
			<u-swiper :list="list" height="500"></u-swiper>
		</view>
		<view class="sawtooth">
			<view class="sawtooth-top" v-if="failshow">
				<image src="../../static/image/fail.png" mode=""></image>
				<view class="sawtooth-title">
					<p class="congratulations">{{failcontent}}</p>
					<p class="first">该防伪码无法查询，请您谨防假冒产品！</p>
				</view>
			</view>
			<view class="sawtooth-top" v-if="securityshow && code_result.result_view == 1">
				<image src="../../static/image/security.png" mode=""></image>
				<view class="sawtooth-title">
					<p class="congratulations">{{code_result.result_msg}}</p>
					<p class="first" v-if="code_result.find_num > 1">该防伪码不是首次查询，请您谨防假冒产品！</p>
					<p class="first" v-else>该防伪码是首次查询，请您放心使用！</p>
				</view>
			</view>
			<view class="line"></view>
			<view class="sawtooth-bottom" v-if="failshow">
				<view class="sawtooth-message">
					<view class="message-left">
						查询次数
					</view>
					<view class="message-right">
						暂无
					</view>
				</view>
				<view class="sawtooth-message">
					<view class="message-left">
						您查询的防伪码是
					</view>
					<view class="message-right">
						暂无
					</view>
				</view>
				<view class="sawtooth-message">
					<view class="message-left">
						首次查询时间
					</view>
					<view class="message-right">
						暂无
					</view>
				</view>
				<view class="sawtooth-message">
					<view class="message-left">
						防伪码所属产品
					</view>
					<view class="message-right">
						暂无
					</view>
				</view>
			</view>
			<view class="sawtooth-bottom" v-if="securityshow && code_result.product_view == 1">
				<view class="sawtooth-message">
					<view class="message-left">
						查询次数
					</view>
					<view class="message-right">
						{{code_result.find_num}}
					</view>
				</view>
				<view class="sawtooth-message">
					<view class="message-left">
						您查询的防伪码是
					</view>
					<view class="message-right">
						{{code_result.number}}
					</view>
				</view>
				<view class="sawtooth-message">
					<view class="message-left">
						首次查询时间
					</view>
					<view class="message-right">
						{{code_result.first_time}}
					</view>
				</view>
				<view class="sawtooth-message">
					<view class="message-left">
						防伪码所属产品
					</view>
					<view class="message-right">
						{{code_result.product.name}}
					</view>
				</view>
			</view>
		</view>
		<image class="home" src="../../static/image/home.png" mode="" @click="gotoindex"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				code: "",
				code_result: [],
				failshow: false,
				securityshow: false,
				platform: "miniapp",
				list: [],
				failcontent:"",
				messagelist: {}
			}
		},
		onLoad(e) {
			this.bannerlists();
			if (e.code != "") {
				this.code = e.code;
				// #ifdef MP
				this.codeResult();
				// #endif
			} 
			// #ifdef H5
			this.GetQueryString();
			// #endif
		},
		methods: {
			bannerlists() {
				let that = this;
				that.$myRequest({
					url: 'addons/track/banner/lists', //请求地址
					method: 'POST', //请求方式
					data: {
					} //请求参数
				}).then(res => {
					if(res.data.code == 1) {
						that.list = res.data.data;
					}
				})
			},
			GetQueryString() {
				var url = window.location.search;
				var theRequest = new Object();
				if (url.indexOf("?") != -1) {
					var str = url.substr(1);
					var strs = str.split("&");
					for (var i = 0; i < strs.length; i++) {
						theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
					}
				}
				if(theRequest.code != "") {
					this.caode = theRequest.code;
					this.platform = "web";
					this.codeResult();
				}
			},
			codeResult() {
				let that = this;
				that.$myRequest({
					url: 'addons/track/code/codeResult', //请求地址
					method: 'POST', //请求方式
					data: {
						code: that.code,
						platform: that.platform
					} //请求参数
				}).then(res => {
					if (res.data.code == 1) {
						if (res.data.data.status == 0) {
							that.failshow = true;
							that.failcontent = res.data.data.result_msg;
						} else {
							that.securityshow = true;
							that.code_result = res.data.data;
						}
					}
				})
			},
			gotoindex() {
			    uni.navigateTo({
					url: '/pages/index/index'
				});
			}
		}
	}
</script>
<style>
	page {
		background-color: #F9F9F9;
	}
</style>
<style lang="scss" scoped>
	
	.bg{ height: 100vh; display: flex; overflow: hidden; width: 100vw;}
	.bg image{ height: 100%; width: 100%;}
	.bgAll{ height: 100vh; overflow: hidden; width: 100vw;}
	
	
	.wrap {
		width: 100%;
		height: 500rpx;
	}
	
	.welcome {
		width: 50%;
		font-size: 46rpx;
		color: #FFFFFF;
		position: absolute;
		left: 45upx;
		top: 95rpx;
	}
	.welcome image{ height: 66upx; margin-bottom: 20upx;}

	.sawtooth {
		width: 100%;
		box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.06);
		background-color: #FFFFFF;
		position: absolute; bottom: 0;
		background: #fff;
		left: 0;
		border-radius: 16upx 16upx 0px 0px;
		height: 40vh;
		padding: 35upx;
		box-sizing: border-box;

		.sawtooth-top {
			width: 100%;
			display: flex;
			position: relative;
			align-items: center;

			image {
				width: 136rpx;
				height: 136rpx;
				position: absolute;
				top: -14rpx;
				left: 0;
			}

			.sawtooth-title {
				margin-left: 138rpx;

				.congratulations {
					color: #333333;
					font-size: 30rpx;
				}

				.first {
					color: #999999;
					font-size: 26rpx;
					margin-top: 8rpx;
				}
			}
		}

		.line {
			width: 100%;
			height: 2rpx;
			margin-top: 48rpx;
		}

		.sawtooth-bottom {
			width: 100%;
			font-size: 24rpx;
			color: #333333;

			.sawtooth-message {
				width: 100%;
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid #ededed;
				margin-bottom: 25upx;
				padding-bottom: 25upx;

				.message-left {
					width: 40%;
					color: #999999;
					font-size: 30upx;
				}

				.message-right {
					text-align: right;
					font-size: 30upx;
				}
			}

			.image-box {
				width: 100%;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.agent {
		width: 83%;
		padding: 0 32rpx 32rpx;
		box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.06);
		border-radius: 16rpx;
		background-color: #FFFFFF;
		margin: 32rpx auto 0;

		.agent-title {
			width: 100%;
			padding: 16rpx 0;
			color: #333333;
			font-size: 28rpx;
			border-bottom: 2rpx solid #E8E8E8;
		}

		.agent-message {
			width: 100%;
			display: flex;
			margin-top: 32rpx;
			justify-content: space-between;
			font-size: 24rpx;

			.message-left {
				color: #999999;
			}

			.message-right {
				text-align: right;
			}
		}
	}
	.home {
		width: 114rpx;
		height: 114rpx;
		position: fixed;
		border-radius: 100rpx;
		right: 15upx;
		bottom: 15upx;
	}
</style>
